<template>
  <div class="table_box">
    <!--    table头-->
    <!--    table body-->
    <div>
      <div class="table_body" v-for="(item,index) in device_data.device_list" :key="index"
                   >
<!--        to="/index/cockpit/device_data_details"-->
        <div class="item_header">
          1
        </div>
        <div class="item_header">
          2
        </div>
        <div class="item_header">
          3
        </div>
        <div class="item_header" :style="{width:'20%'}">
          <!--设备状态-->
          4
        </div>
        <div class="item_header" :style="{width:'20%'}">
          <!--设备状态-->
          4
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import device from "@/components/echart_components/device";
import {defineComponent, reactive} from "vue"

export default defineComponent({
  name: "exception_list",
  props: {
    width: {
      default: 280,
      type: Number
    }
  },
  setup() {
    const device_data = reactive({
      device_list: [1, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1]
    });
    return {
      device_data
    }
  },
  components: {
    device
  }
})
</script>

<style scoped lang="scss">
.table_box {
  color: white;

  .table_header {
    display: flex;
    flex-direction: row;
    width: 100%;
    font-size: 1.0rem;

    .item_header {
      border: 0.001rem #16d1ff dashed;
      width: 20%;
      height: 2rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .table_body {
    display: flex;
    flex-direction: row;
    width: 100%;
    font-size: 1.0rem;

    .item_header {
      border: 0.001rem #16d1ff dashed;
      width: 20%;
      height: 3rem;
      display: flex;
      justify-content: center;
      align-items: center;

      .device_box {
        height: 1.8rem;
        width: 100%;
      }
    }
  }


}
</style>
